import React, { useState, useCallback } from 'react';
import { Monitor, Video, Radio, Save } from 'lucide-react';
import { ProcessTask, TaskType, QualityPreset } from '@/types/video';
import './styles.less';

interface ProcessSettingsProps {
  tasks: ProcessTask[];
  onSettingsChange: (settings: any) => void;
  className?: string;
}

export const ProcessSettings: React.FC<ProcessSettingsProps> = ({
  onSettingsChange,
  className = '',
}) => {
  const [settings, setSettings] = useState({
    taskType: 'convert' as TaskType,
    outputFormat: 'mp4',
    quality: 'medium' as QualityPreset,
    resolution: '1080p',
    bitrate: 'auto',
    frameRate: 'original',
    audioCodec: 'aac',
    audioBitrate: '128k',
    outputPath: '',
    fileNaming: {
      includeOriginalName: true,
      includeTimestamp: true,
      includeCounter: true,
      prefix: '',
      suffix: '_converted',
    },
    batchOptions: {
      maxConcurrency: 3,
      skipErrors: false,
      overwriteExisting: true,
    },
  });

  // 处理类型选项
  const taskTypes = [
    { value: 'convert', label: '格式转换', icon: Monitor },
    { value: 'compress', label: '视频压缩', icon: Video },
    { value: 'extract_audio', label: '提取音频', icon: Radio },
  ];

  // 输出格式选项
  const outputFormats = [
    { value: 'mp4', label: 'MP4' },
    { value: 'avi', label: 'AVI' },
    { value: 'mov', label: 'MOV' },
    { value: 'mkv', label: 'MKV' },
    { value: 'wmv', label: 'WMV' },
  ];

  // 质量预设选项
  const qualityPresets = [
    { value: 'low', label: '低质量', description: '文件最小，适合移动设备' },
    { value: 'medium', label: '标准质量', description: '平衡文件大小和质量' },
    { value: 'high', label: '高质量', description: '高质量保存，文件较大' },
    { value: 'lossless', label: '无损', description: '最高质量，文件最大' },
  ];

  // 分辨率选项
  const resolutionOptions = [
    { value: 'original', label: '保持原分辨率' },
    { value: '720p', label: '720p (1280×720)' },
    { value: '1080p', label: '1080p (1920×1080)' },
    { value: '2k', label: '2K (2560×1440)' },
    { value: '4k', label: '4K (3840×2160)' },
  ];

  // 帧率选项
  const frameRateOptions = [
    { value: 'original', label: '保持原帧率' },
    { value: '24', label: '24 FPS' },
    { value: '30', label: '30 FPS' },
    { value: '60', label: '60 FPS' },
  ];

  // 音频编解码器选项
  const audioCodecOptions = [
    { value: 'aac', label: 'AAC' },
    { value: 'mp3', label: 'MP3' },
    { value: 'flac', label: 'FLAC' },
    { value: 'wav', label: 'WAV' },
  ];

  // 音频比特率选项
  const audioBitrateOptions = [
    { value: '64k', label: '64 kbps' },
    { value: '128k', label: '128 kbps' },
    { value: '192k', label: '192 kbps' },
    { value: '256k', label: '256 kbps' },
    { value: '320k', label: '320 kbps' },
  ];

  // 并发数量选项
  const concurrencyOptions = [1, 2, 3, 4, 5].map(num => ({
    value: num,
    label: `${num} 个任务同时处理`,
  }));

  const handleSettingChange = useCallback(
    (key: string, value: any) => {
      const newSettings = {
        ...settings,
        [key]: value,
      };
      setSettings(newSettings);
      onSettingsChange(newSettings);
    },
    [settings, onSettingsChange]
  );

  const handleNestedSettingChange = useCallback(
    (parentKey: string, key: string, value: any) => {
      const parentSettings = settings[parentKey as keyof typeof settings] as Record<string, any>;
      const newSettings = {
        ...settings,
        [parentKey]: {
          ...parentSettings,
          [key]: value,
        },
      };
      setSettings(newSettings);
      onSettingsChange(newSettings);
    },
    [settings, onSettingsChange]
  );

  const handleSavePreset = useCallback(() => {
    // 保存预设的逻辑
    console.log('保存预设:', settings);
  }, [settings]);

  return (
    <div className={`process-settings ${className}`}>
      <div className='process-settings__header'>
        <h3 className='process-settings__title'>处理设置</h3>
        <button
          onClick={handleSavePreset}
          className='btn btn-outline btn-sm flex items-center space-x-1'
        >
          <Save className='w-4 h-4' />
          <span>保存预设</span>
        </button>
      </div>

      <div className='process-settings__container'>
        {/* 处理类型 */}
        <div className='process-settings__section'>
          <label className='process-settings__label'>处理类型</label>
          <div className='process-settings__task-types'>
            {taskTypes.map(({ value, label, icon: Icon }) => (
              <button
                key={value}
                onClick={() => handleSettingChange('taskType', value)}
                className={`process-settings__task-type ${
                  settings.taskType === value
                    ? 'process-settings__task-type--active'
                    : ''
                }`}
              >
                <Icon className='process-settings__task-type-icon' />
                <span className='process-settings__task-type-label'>{label}</span>
              </button>
            ))}
          </div>
        </div>

        {/* 输出格式 */}
        <div className='process-settings__section'>
          <label className='process-settings__label'>输出格式</label>
          <select
            value={settings.outputFormat}
            onChange={e => handleSettingChange('outputFormat', e.target.value)}
            className='process-settings__select'
          >
            {outputFormats.map(format => (
              <option key={format.value} value={format.value}>
                {format.label}
              </option>
            ))}
          </select>
        </div>

        {/* 质量预设 */}
        <div className='process-settings__section'>
          <label className='process-settings__label'>质量预设</label>
          <select
            value={settings.quality}
            onChange={e => handleSettingChange('quality', e.target.value)}
            className='process-settings__select'
          >
            {qualityPresets.map(preset => (
              <option key={preset.value} value={preset.value}>
                {preset.label}
              </option>
            ))}
          </select>
          <p className='process-settings__description'>
            {qualityPresets.find(p => p.value === settings.quality)?.description}
          </p>
        </div>

        {/* 分辨率设置 */}
        <div className='process-settings__section'>
          <label className='process-settings__label'>分辨率</label>
          <select
            value={settings.resolution}
            onChange={e => handleSettingChange('resolution', e.target.value)}
            className='process-settings__select'
          >
            {resolutionOptions.map(option => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>

        {/* 帧率设置 */}
        <div className='process-settings__section'>
          <label className='process-settings__label'>帧率</label>
          <select
            value={settings.frameRate}
            onChange={e => handleSettingChange('frameRate', e.target.value)}
            className='process-settings__select'
          >
            {frameRateOptions.map(option => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>

        {/* 音频设置 */}
        <div className='process-settings__section'>
          <div className='process-settings__grid'>
            <div>
              <label className='process-settings__label'>音频编解码器</label>
              <select
                value={settings.audioCodec}
                onChange={e => handleSettingChange('audioCodec', e.target.value)}
                className='process-settings__select'
              >
                {audioCodecOptions.map(option => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className='process-settings__label'>音频比特率</label>
              <select
                value={settings.audioBitrate}
                onChange={e => handleSettingChange('audioBitrate', e.target.value)}
                className='process-settings__select'
              >
                {audioBitrateOptions.map(option => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>

        {/* 批量处理选项 */}
        <div className='process-settings__section'>
          <h4 className='process-settings__subtitle'>批量处理选项</h4>

          <div>
            <label className='process-settings__label'>同时处理任务数</label>
            <select
              value={settings.batchOptions.maxConcurrency}
              onChange={e =>
                handleNestedSettingChange(
                  'batchOptions',
                  'maxConcurrency',
                  parseInt(e.target.value)
                )
              }
              className='process-settings__select'
            >
              {concurrencyOptions.map(option => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </div>

          <div className='process-settings__checkbox-group'>
            <label className='process-settings__checkbox'>
              <input
                type='checkbox'
                checked={settings.batchOptions.skipErrors}
                onChange={e =>
                  handleNestedSettingChange('batchOptions', 'skipErrors', e.target.checked)
                }
              />
              <span>跳过错误文件继续处理</span>
            </label>

            <label className='process-settings__checkbox'>
              <input
                type='checkbox'
                checked={settings.batchOptions.overwriteExisting}
                onChange={e =>
                  handleNestedSettingChange('batchOptions', 'overwriteExisting', e.target.checked)
                }
              />
              <span>覆盖已存在的文件</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProcessSettings;
